<template>
  <view class="page">
    <uni-section class="mb-10" title="开通会员" type="line"></uni-section>
    <view class="content-wapper">
      <rich-text :nodes="content"></rich-text>
    </view>
    <view class="footer">
      <view class="footer-content">
        <view class="box" :style="{ backgroundImage: `url(${item.imgUrl})` }" v-for="(item,index) in vipTypeList"
              :key="index" @click="handleToPay(index)">
          <text>{{index===0?'立即续费':'立即升级'}}</text>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import PHOTO from "@/static/const/photo";
import bgBase64 from "@/static/const/bgBase64";
import {getStorage} from "@/utils/auth";
import {formatRichText, isEmptyArray, isEmptyString} from "@/utils/common";
import application from "@/static/const/application";

export default {
  name: "enableVIP",
  data() {
    return {
      content: "",
      imgUrl: bgBase64.vipBg,
      vipTypeList: [],
      user: {}
    };
  },
  onLoad() {
    this.user = getStorage(application.user);
    this.getVipContent();
    this.getVipType();
  },
  methods: {
    getVipContent() {
      this.$store.dispatch("GetAboutMeList",{
        type:PHOTO.VIP,
        current:1,
        size:1
      } ).then(res => {
        if (!isEmptyArray(res.data.records)) {
          this.content = formatRichText(res.data.records[0].content);
        }
      })
    },
    //获取开通vip类型
    getVipType() {
      this.$store.dispatch("ListVipType").then(res => {
        console.log(res);
        if (!isEmptyArray(res.data.records)) {
          this.vipTypeList = res.data.records;
          this.vipTypeList.forEach((item, index) => {
            if (index % 2 === 0) {
              item.imgUrl = bgBase64.vipBg
            } else {
              item.imgUrl = bgBase64.vipGoldBg
            }
          })
        }
      })
    },
    //去支付
    handleToPay(index) {
      console.log(index);
      if (isEmptyString(this.user)) {
        uni.navigateTo({
          url: "/pages/login?state=bindWechat"
        });
        return;
      }

      if (isEmptyString(this.user.openid)) {
        // toast("请先绑定微信");
        uni.navigateTo({
          url: "/pages/login?state=bindWechat"
        });
        return;
      }
      const price = this.vipTypeList[index].price;
      let type="1";
      if(index===1){
        type="2";
      }
      this.paySubmit(price,type)
    },
    paySubmit(price,type) {
      let data = {
        price: price,
        vipType:type
      };
      if(!isEmptyString(this.teamId)){
        data.teamId = this.teamId;
      }
      this.$store
          .dispatch("GenerateVipOrder", data)
          .then((res) => {
            console.log("生成订单成功");
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: res.data.timeStamp,
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              signType: res.data.signType,
              paySign: res.data.paySign,
              success: function (res) {
                uni.$emit("updateUser",{msg:'页面更新'});
              },
              fail: function (err) {
                console.log("fail:" + JSON.stringify(err));
              },
            });
          });
    },
  },
}
</script>

<style scoped lang="scss">
.page {
  .content-wapper {
    width: 100%;
    padding: 0 20rpx 5rem;
  }

  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 3rem;
    padding: 0.5rem 20rpx;
    background-color: #fff;

    .footer-content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .box {
        width: 45%;
        height: 100%;
        background-size: cover;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        border-radius: 20rpx;

        text {
          font-size: 1.2rem;
          color: #fff;
        }

        .big {
          font-size: 0.8rem;
          padding: 0 20rpx 0 10rpx;
        }
      }
    }
  }
}
</style>